<template>
    <div class="balance">
        <div class="my">
            <div class="num">{{user_info.money||0}}</div>
            <div class="img">
                <img src="../../../assets/images/money.png" />金币
            </div>
        </div>
        <div class="content">
            <div class="tt">充值</div>
            <ul class="money">
                <li  v-for="(item,index) in list" :key="index">
                    <div>
                        <div class="t">
                            <span>{{item.cybermoney}}</span>金币
                        </div>
                        <div class="b">
                            售价{{item.total}}元
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="tt" style="margin-bottom:5px">选择充值方式</div>
            <div class="paytypes">
                <div class="active">
                    <img src="../../../assets/images/weixin.png" />微信支付
                </div>
                <div class="active">
                    <img src="../../../assets/images/zhifubao.png" />支付宝
                </div>
            </div>
        </div>
        <div class="cz">充值</div>
    </div>
</template>
<style scoped lang="less">
.balance {
    .my {
        text-align: center;
        padding: 30px;
        .num {
            font-size: 30px;
            font-weight: bold;
        }
        .img {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 0;
            color: @yellow;
            img {
                width: 15px;
                margin-right: 5px;
            }
        }
    }
    .content {
        margin: 0 30px;
        .tt {
            padding: 15px 0 5px;
            color: #666;
            border-top: 1px solid #ececec30;
            margin-top: 20px;
        }
        .money {
            overflow: hidden;
            margin:0 -10px;
            li {
                width: 33.333%;
                padding: 10px;
                float: left;
                &.active{
                    &>div{
                        border-color: @yellow;
                    }
                }
                & > div {
                    background: @bgcolor;
                    border-radius: 10px;
                    text-align: center;
                    padding: 15px 0;
                border: 1px solid transparent;
                    .t {
                        color: @yellow;
                        span {
                            font-size: 18px;
                            color: #fff;
                        }
                    }
                    .b {
                        margin-top: 5px;
                        color: #666;
                        font-size: 12px;
                    }
                }
            }
        }
        .paytypes {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            & > div {
                width: 48%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                padding: 20px 0;
                background: @bgcolor;
                border-radius: 10px;
                border: 1px solid transparent;
                &.active {
                    border-color: #4bc166;
                    position: relative;
                    &::before {
                        content: "";
                        position: absolute;
                        right: 3px;
                        bottom: 3px;
                        width: 15px;
                        height: 15px;
                        background: url("../../../assets/images/r1.png")
                            no-repeat center/100%;
                    }
                    &:last-child {
                        border-color: #4ba9c4;
                        &::before {
                            background: url("../../../assets/images/r2.png")
                                no-repeat center/100%;
                        }
                    }
                }
                img {
                    width: 25px;
                    height: 25px;
                    margin-right: 10px;
                }
            }
        }
    }
    .cz {
        width: 80%;
        display: block;
        border-radius: 40px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 50px auto;
        background: #212121;
        border: none;
    }
}
</style>
<script>
export default {
    data () {
        return {
            user_info: {},
            list: []
        }
    },
    mounted () {
        this.$model.comm.getConfig().then(res=>{
            this.user_info= res.data.user_info || {}
            this.list= res.data.list || {}
        })
    }
}
</script>